<template>
  <div class="left-wrap">
    <el-radio-group v-model="current">
      <el-radio-button label="dept">组织架构</el-radio-button>
      <el-radio-button label="role">角色</el-radio-button>
    </el-radio-group>
    <el-input v-model="key" style="margin-top: 16px" placeholder="输入关键字进行过滤"></el-input>
    <el-tree
      style="margin-top: 16px"
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      :current-node-key="currentId"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="selectAll(data)"> 全选 </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { requestDepartmentTreeList } from '@/api/system/dept'
import { requestRoleList } from '@/api/system/role'
import { requestUserPage } from '@/api/system/user'
export default {
  name: 'Left',
  props: {
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      current: 'dept',
      key: '',
      treeData: [],
      defaultProps: {},
      currentId: '',
    }
  },
  watch: {
    current: {
      handler: function (newval) {
        if (newval === 'dept') {
          this.getDeptData()
        } else {
          this.getRoleData()
        }
      },
      immediate: true,
    },
  },
  methods: {
    getDeptData() {
      this.defaultProps = {
        label: 'name',
      }
      requestDepartmentTreeList({
        name: this.key,
      }).then((res) => {
        let data = [{ name: '全部', id: '', deptId: '', children: res.data.listObject }]
        this.treeData = data
      })
    },
    getRoleData() {
      this.defaultProps = {
        label: 'name',
        id: 'roleId',
      }
      requestRoleList({
        name: this.key,
      }).then((res) => {
        this.treeData = res.data
      })
    },
    handleNodeClick(node) {
      console.log(node, this.current)
      if (this.currentId === node.deptId || this.currentId === node.roleId) return
      this.currentId = this.current === 'dept' ? node.deptId : node.roleId
      let params = {}
      if (this.current === 'dept') {
        params['deptId'] = node.deptId
      } else {
        params['roleIds'] = [node.roleId]
      }
      this.$emit('update:params', params)
    },
    selectAll(data) {
      let params = { pageNo: 1, pageSize: 1000 }
      if (this.current === 'dept') {
        params.deptId = data.deptId
      } else {
        params.roleIds = [data.roleId]
      }
      requestUserPage(params).then((res) => {
        let list = res.data.listObject.map((item) => ({ ...item, id: item.userId }))
        this.$emit('add', list)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.left-wrap {
  padding-right: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
